<template>
  <uni-nav-bar title="我的订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <environment></environment>
  <view class="package slither">
    <text
      v-for="(item, index) in list"
      :key="item.name"
      :style="{ color: active == index ? '#2E99FF' : '#333333', 
      fontSize: active == index ? '30rpx' : '28rpx'}"
      @click="changeShop(index)"
    >
      {{ item.name }}
    </text>
  </view>
  <FillIngOrder v-if="active == '1'" type="takeout"></FillIngOrder>
  <FillIngOrder v-else-if="active == '2'" type="order"></FillIngOrder>
  <scroll-view
    v-else
    scroll-y="true"
    enable-back-to-top
    @scrolltolower="loadMore"
    class="scroll-box"
    :style="{ height: pageHeight + 'px' }"
  >
    <view
      v-if="active == '0'"
      class="package"
      v-for="(item, index) in shopAll"
      :key="index"
      @click="
        item.type == 'store'
          ? navTo('order/commodityDetail?id=' + item.order_id)
          : navTo('order/groupDetail?id=' + item.order_id)
      "
    >
      <view class="space-between shopTop">
        <view
          class="packageLsit"
          v-if="item.type == 'store'"
          @click.stop="navTo('shopp/Shopkeeper?id=' + item.item_id)"
        >
          <image src="../../static/groupBenefits/shop.png" mode=""></image>
          <text>{{ item.item_name }}</text>
          <uni-icons type="forward" size="19" color="#666"></uni-icons>
        </view>
        <view class="packageLsit" v-if="item.type == 'team'">
          <image src="../../static/groupBenefits/m.png" mode=""></image>
          <text>{{ item.item_name }}</text>
        </view>
        <view class="tit" :style="{ color: item.status_text == '未支付' ? '#309BFF' : '#333' }">
          {{ item.status_text }}
        </view>
      </view>
      <shopList :shoppAll="item.goods_list" :show="true"></shopList>
      <view style="color:#666;font-size: 26rpx;">下单时间：{{ item.createtime }}</view>
      <view class="payFor">
        <text>总金额￥</text>
        <text>{{ item.money }}</text>
        <text>总优惠￥{{ item.yh_money }}</text>
      </view>
    </view>
    <view class="package" v-if="active == '3'" v-for="(item, index) in shopAll" :key="index">
      <IntegralShop :type="'num'" :state="'active'" :shoppAll="item.goods"></IntegralShop>
      <Shoppay :state="'myOrder'" :payFor="item"></Shoppay>
      <view style="width: 100%;height: 2rpx;background-color: #eee;margin: 10rpx 0px;"></view>
      <PayTime :payFor="item" :state="'order'"></PayTime>
    </view>
    <view class="column fillings" v-if="active != '1' && shopAll.length < 1" :style="{ height: pageHeight + 'px' }">
      <image :src="Empty"></image>
      <text>暂无订单记录</text>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { navBack, navTo } from '@/utils/navigator';
import Shoppay from '@c/groupBenefits/pay.vue';
import PayTime from '@c/groupBenefits/payTime.vue';
import shopList from '@c/order/shopList.vue';
import FillIngOrder from '@c/order/fillIngOrder.vue';
import environment from '@c/pobulic/environment.vue';
import IntegralShop from '@c/order/IntegralShops.vue';
import { Empty } from '@/utils/Static';
import { isH5 } from '@/utils/platform';
import { onShow,onUnload } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { shopsOrder } from '@/gql/shop';
import { CapitalList } from '@/gql/Infusion';
import { getDriverID } from '@/stores/driverID';
import { ref, onMounted } from 'vue';
/**
 * 我的订单
 * @param user_id  用户ID
 * @param driver_id  用户ID
 * @param active  订单类型的索引值
 * @param list  订单类型列表
 * @param isLoading  是否上拉加载
 * @param lastPage  订单总页数
 * @param currentPage  当前页数
 * @param shopAll  订单数据列表
 * @param pageHeight  订单页面高度
 */
const user_id = getDriverID();
const driver_id = getDriverID();
const active = ref(0);
const list = [{ name: '卡友商城订单' },{ name: '车用尿素外卖订单' }, { name: '车用尿素订单' }, { name: '积分订单' }];
const isLoading = ref(false);
const lastPage = ref(1);
const currentPage = ref(1);
const shopAll = ref([]);
const pageHeight = ref('');

onMounted(() => {
  const num = isH5 ? 110 : 135;
  uni.getSystemInfo({
    success: function(res) {
      pageHeight.value = (res.windowHeight - num).toString();
    },
  });
});
onShow(() => {
  shopAll.value = [];
  currentPage.value = 1;
  active.value = uni.getStorageSync('active') ? uni.getStorageSync('active') : 0;
  init();
});
/**
 * 初始化订单列表信息
 * @param active  订单类型的索引值
 * @param user_id  用户ID
 * @param driver_id  用户ID
 * @param page  页数
 */
function init() {
  isLoading.value = true;
  switch (active.value) {
    case 0:
      var payload = {
        query: shopsOrder,
        variables: {
          driver_id: user_id,
          page: currentPage.value,
        },
      };
      toPublish('ql/store/getOrderList', payload, (obj: any) => {
        const { user_order_list } = obj.data;
        isLoading.value = false;
        shopAll.value = [...shopAll.value, ...user_order_list.list];
        lastPage.value = user_order_list.lastpage;
      });
      break;
    case 3:
      var payload2 = {
        query: CapitalList,
        variables: {
          driver_id,
          page: currentPage.value,
        },
      };
      toPublish('ql/store/getScoreOrderList', payload2, (obj: any) => {
        const { score_order_list } = obj.data;
        isLoading.value = false;
        shopAll.value = [...shopAll.value, ...score_order_list.list];
        lastPage.value = score_order_list.lastpage;
      });
      break;
  }
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage.value < lastPage.value) {
    currentPage.value++;
    init();
  }
}
/**
 * 选择订单类型
 * @param {Object} num 加注订单类型索引
 * @param currentPage 当前页数
 * @param shopAll 清空订单数据列表
 * @return 再次获取当前订单类型的数据
 */
function changeShop(num) {
  uni.setStorageSync('active', num);
  active.value = num;
  currentPage.value = 1;
  shopAll.value = [];
  init();
}
onUnload(()=>{
   uni.removeStorageSync('active')
})
</script>

<style scoped lang="less">
.shopTop {
  width: 100%;
  box-sizing: border-box;
}

.packageLsit {
  display: flex;
  align-items: center;

  image {
    width: 50rpx;
    height: 50rpx;
  }

  text {
    font-size: 30rpx;
    font-weight: 400;
    color: #181818;
    margin: 0px 10rpx;
  }
}

.tit {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #309bff;
}

.text {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}

.payFor {
  // display: flex;
  // align-items: center;
  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
    border-radius: 50%;
  }

  text {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ff0000;
  }

  text:nth-of-type(2) {
    font-size: 40rpx;
    font-weight: 500;
  }

  text:nth-of-type(3) {
    font-size: 22rpx;
    color: #383838;
    margin-left: 20rpx;
  }
}

.fillings {
  image {
    width: 350rpx;
    height: 300rpx;
  }

  text {
    font-size: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666;
    margin-top: 50rpx;
  }
}

.scroll-box {
  .package:nth-of-type(1) {
    margin-top: 0px;
  }
}
.slither::-webkit-scrollbar{
    display:none
  }
.slither{
  overflow: auto;
  white-space:nowrap;
  text{
    margin-right: 20rpx;
    display: inline-block;
  }
}
</style>
